<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="/css/h5/information_detail/amazeui.min.css"/>
    <link rel="stylesheet" href="/css/h5/information_detail/wap.css"/>
    <title th:text="${actor.name}"></title>
    <style type="text/css">
        @font-face {font-family: "iconfont";
            src: url('/fonts/iconfont/iconfont.eot'); /* IE9*/
            src: url('/fonts/iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('/fonts/iconfont/iconfont.woff') format('woff'), /* chrome, firefox */
            url('/fonts/iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
            url('/fonts/iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .dramaListItem {
            height: 80px;
            padding: 0px;
            float: right;
            width: 66.66666667%;
            position: relative;
            box-sizing: border-box;
        }

        @media only screen and (max-width: 640px)
        .am-list-news-default .am-list-item-thumb-right .am-list-thumb {
            max-height: 80px;
            overflow: hidden;
        }

        .iconfont {
            font-family:"iconfont" !important;
            font-size:16px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        .pet_content_list{
            padding-top: 0px;
        }

        .pet_grzx_ico {
            margin: 0 auto;
            width: 225px;
            height: 225px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #fff;
        }

        .pet_grzx_nr{
            background: url("/img/bg3.jpg");
            background-position: -12px -26px;
        }

        .pet_grzx_name{
            font-size:24px;
        }

        .pet_grzx_num_font{
            color: #585858;
            font-size:18px;
        }
        .rep_work{
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
        }

        .click_item{
            background: #f2f2f2!important;
        }

        .pet_content_main .am-list-news-default .pet_list_one_bt{
            padding-top: 10px;
        }

        .am-list-news-default .am-list .am-list-thumb img{
            height:150px;
        }


        /*剧照写真部分图片展示*/
        .img-left{
            display: inline-block;float: left;
        }

        .img-right{
            display: inline-block;float: left;width:420px;margin-left: 5px;
        }

        .img-right-up{
            display: inline-block;margin-bottom:5px;
        }

        .img-right-down{
            display: inline-block;
        }

        .imgOne{
            width:190px;height:230px;
        }

        .imgTwo{
            width:190px;height:112px;margin-right:2px;
        }

        .imgFour{
            width:190px;height:113px;margin-right:2px;
        }



        @media screen and (min-width: 350px) and (max-width:768px) {
            .img-right{
                display: inline-block;float: left;width:230px;margin-left: 5px;
            }

            .imgOne{
                width:100px;height:130px;
            }

            .imgTwo{
                width:111px;height:62px;margin-right:2px;
            }

            .imgThree{
                width:111px;height:62px;
            }

            .imgFour{
                width:111px;height:63px;margin-right:2px;
            }

            .imgFive{
                width:111px;height:63px;
            }
        }


        /*剧照*/
         .drama_img_list img{
             width: 100%;
             border-radius: 5px;
         }
    </style>
</head>
<body style="background:#ececec">
<div class="pet_mian" >
    <div class="pet_content pet_content_list">
        <div class="pet_grzx" style="padding: 0px;">

            <div class="pet_grzx_nr">
                <div class="pet_grzx_ico">
                    <img th:src="${actor.faceurl}" alt=""/>
                </div>
                <div class="pet_grzx_name" style="margin-bottom: 10px;">
                    <p>
                        <span th:text="${actor.name}"></span>
                        <input id="shareTitle" type="hidden" th:value="${actor.name}"/>
                        <input id="url" type="hidden" th:value="${#httpServletRequest.getRequestURL().toString()}"/>

                        <!--<span th:value="${actor.gender lt 1 ? '男' : actor.gender gt 1 ? '保密' : '女'}">保密11</span>-->
                        <span th:switch="${actor.gender}">
                            <span th:case="0"><i class="icon iconfont">&#xe65b;</i></span>
                            <span th:case="1"><i class="icon iconfont">&#xe639;</i></span>
                            <span th:case="2">保密</span>
                        </span>
                    </p>
                    <p>
                        <span style="font-size: 14px;color: #7b7a7a;" th:text="'('+${actor.birth}"></span>
                        <span style="font-size: 14px;color: #7b7a7a;" th:switch="${actor.constellation}">
                            <span th:case="0">水瓶座)</span>
                            <span th:case="1">双鱼座)</span>
                            <span th:case="2">白羊座)</span>
                            <span th:case="3">金牛座)</span>
                            <span th:case="4">双子座)</span>
                            <span th:case="5">巨蟹座)</span>
                            <span th:case="6">狮子座)</span>
                            <span th:case="7">处女座)</span>
                            <span th:case="8">天秤座)</span>
                            <span th:case="9">天蝎座)</span>
                            <span th:case="10">射手座)</span>
                            <span th:case="11">摩羯座)</span>
                        </span>
                    </p>
                </div>
                <!--<div class="pet_grzx_map" th:text="${tActor.gender}">女</div>-->
                <!--<div class="pet_grzx_num_font" style="padding-top: 0px;">-->
                    <!--&lt;!&ndash;<p>天蝎座</p>&ndash;&gt;-->
                    <!--&lt;!&ndash;<p>1995年12月10日</p>&ndash;&gt;-->
                    <!--&lt;!&ndash;<p class="rep_work">代表作品</p>&ndash;&gt;-->
                <!--</div>-->
                <!-- <div class="pet_grzx_num">
                  <span>653<i>喜欢</i></span>
                  <span>234<i>关注</i></span>
                  <span>34<i>文章</i></span>
                </div> -->

            </div>


            <input type="hidden" th:value="${actor.portraitUrl}" id="portraitUrl"/>
            <div class="pet_grzx_list">
                <div class="pet_content_main pet_article_like_delete">
                    <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
                        <div class="am-list-news-bd">
                            <p style="font-size: 20px;padding-left: 15px;border-left: 15px solid red;">剧照写真</p>
                            <!--<div class="img-wrap">-->
                                <!--<div class="img-left">-->
                                    <!--<img src="" class="pet_list_one_img imgOne" alt="" id="imgOne"/>-->
                                <!--</div>-->
                                <!--<div class="img-right">-->
                                    <!--<div class="img-right-up">-->
                                        <!--<img src="" class="pet_list_one_img imgTwo" alt="" id="imgTwo"/>-->
                                        <!--<img src="" class="pet_list_one_img imgThree" alt="" id="imgThree"/>-->
                                    <!--</div>-->
                                    <!--<div class="img-right-down">-->
                                        <!--<img src="" class="pet_list_one_img imgFour" alt="" id="imgFour"/>-->
                                        <!--<img src="" class="pet_list_one_img imgFive" alt="" id="imgFive"/>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                            <div class="drama_img_list" th:if="${not #strings.isEmpty(actor.portraitUrl)}">
                                <img th:if="${#strings.contains(actor.portraitUrl,'@@@@')}" th:each="imgUrl,iterStat:${#strings.arraySplit(actor.portraitUrl,'@@@@')}" style="margin-bottom: 10px;" class="cover-img" th:src="${imgUrl}" alt="剧照写真"/>
                            </div>


                            <div style="clear: both;"></div>
                            <p style="font-size: 20px;padding-left: 15px;border-left: 15px solid red;margin-top: 18px;">相关剧作</p>
                            <ul class="am-list" th:each="drama:${dramas}" id="dramasList">
                                <!--缩略图在标题右边-->
                                <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block" th:attr="dramaId=${drama.id}">
                                    <div class="am-u-sm-4 am-list-thumb pet_video_info" style="padding-left: 0px;padding-right: 15px;">
                                        <!--<div class="pet_video_info_tag"><i class="iconfont">&#xe62d;</i>03:50</div>-->
                                        <a href="javascript:void(0);">
                                            <img th:src="${#strings.substring(drama.dramaUrl,0,#strings.indexOf(drama.dramaUrl,'@@@@'))}" class="pet_list_one_img" alt=""/>
                                        </a>
                                    </div>
                                    <div class="dramaListItem">
                                        <h3 class="am-list-item-hd pet_list_one_bt"><a th:href="@{'/api/detail/drama/'+${drama.id}}" th:text="${drama.name}" style="padding-top:10px;"></a></h3>
                                        <div class="am-list-item-text pet_list_one_text" th:text="${drama.description}"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>

                </div>

            </div>
            <div class="pet_article_dowload">
                <div class="pet_article_dowload_title">关于至娱</div>
                <div class="pet_article_dowload_content"><div class="pet_article_dowload_triangle"></div>
                    <div class="pet_article_dowload_ico"><img src="/images/zyzl_head2.png" alt=""/></div>
                    <div class="pet_article_dowload_content_font">
                        至娱APP是一个影视娱乐专业资讯发布平台。传播平台包括至娱官网、至娱APP、至娱APP官方媒体、至娱APP微信公众平台，以及多渠道平台的至娱APP自媒体号。
                        欢迎合作!
                    </div>
                    <!--<div class="pet_article_dowload_all">-->
                        <!--<a href="###" class="pet_article_dowload_Az am-icon-apple" th:if="${ifIos}=='1'"> App store</a>-->
                        <!--<a href="###" class="pet_article_dowload_Pg am-icon-android" th:if="not (${ifIos}=='1')"> Android</a>-->
                    <!--</div>-->
                </div>
            </div>
        </div>

        <div class="pet_article_footer_info">Copyright(c)2017 ZhiYu All Rights Reserved</div>
    </div>
</div>
<script src="/js/common/jquery-2.1.1.min.js"></script>
<script src="/js/h5/amazeui.min.js"></script>
<script>
    $(function(){

        // 动态计算新闻列表文字样式
        auto_resize();
        $(window).resize(function() {
            auto_resize();
        });
        $('.am-list-thumb img').load(function(){
            auto_resize();
        });
        $('.pet_article_like li:last-child').css('border','none');
        function auto_resize(){
            $('.pet_list_one_nr').height($('.pet_list_one_img').height());
            // alert($('.pet_list_one_nr').height());
        }
        $('.pet_article_user').on('click',function(){
            if($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')){
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
            }else{
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
            }
        });

        $('.pet_head_gd_ico').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
        });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });

        initPortraitImg();
    });

    function initPortraitImg() {
        var portraitUrl = $("#portraitUrl").val();
        var portraitImgArr = portraitUrl.split("@@@@");
        var len = portraitImgArr.length;

        if(len == 5){
            $("#imgOne").attr("src",portraitImgArr[0]);
            $("#imgTwo").attr("src",portraitImgArr[1]);
            $("#imgThree").attr("src",portraitImgArr[2]);
            $("#imgFour").attr("src",portraitImgArr[3]);
            $("#imgFive").attr("src",portraitImgArr[4]);
        }
    }

    $("#dramasList > li").click(function(){
        $(this).addClass("click_item");
        var dramaId = $(this).attr("dramaId");
        window.location.href = "/api/detail/drama/"+dramaId;
    })

</script>

<script th:src="@{/js/weixin/jweixin-1.4.0.js}"></script>
<script>
    /*<![CDATA[*/
    // var imgUrl = "http://zhiyume-img.oss-cn-beijing.aliyuncs.com/information/20190331141907_zyzl.png?Expires=1869373147&OSSAccessKeyId=LTAI8hTtxsI962e5&Signature=TKCSijQO3Nf%2BYRYH6g%2F8LcmtDak%3D";
    /*]]>*/

    var imgUrl = $('.pet_grzx_ico img').attr('src');

    $.ajax({
        type: "POST",
        url: "/api/detail/getweixinconfig",
        data: {
            url : location.href.split('#')[0]
        },
        async: true,
        success: function(res){
            console.info(res);
            var data = res;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data['appid'], // 必填，公众号的唯一标识
                timestamp: data['timestamp'], // 必填，生成签名的时间戳
                nonceStr: data['nonceStr'], // 必填，生成签名的随机串
                signature: data['signature'],// 必填，签名
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData'
                ] // 必填，需要使用的JS接口列表
            });

            var url = location.href.split('#')[0];
            var title = $('#shareTitle').val();
            var desc = $('.pet_article_dowload_content_font').text();
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: url,
                    imgUrl: imgUrl,
                    success: function () {
                        // 设置成功
                        // 可以记录分享了
                    }
                });

                wx.updateTimelineShareData({
                    title: title, // 分享标题
                    link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
            });


        }
    });
</script>

</body>
</html>